<script setup lang="ts">
/*
vue2
  v-model
     <xxx :value="appValue" @input="appValue=$event" />
     <xxx v-model="appValue"  />
     xxx.vue
     props:['value']
     this.$emit('input',实参值)
  .sync
    <xxx :aaa="appAaa" @update:aaa="appAaa=$event"  />
    <xxx :aaa.sync="appAaa"  />
    xxx.vue
    props:['aaa']
    this.$emit('update:aaa',实参值)

vue3  v-model
  <xxx :modelValue="appValue" @update:modelValue="appValue=$event" />
  <xxx v-model:modelValue="appValue"  /> 
  <xxx v-model="appValue"  />   只限于参数名叫modelValue
  xxx.vue
  const props=defineProps<{
    modelValue:number
  }>()
  const emits=defineEmits<{
    (e:'update:modelValue',val:number):void
  }>()
  emits('update:modelValue',实参值)
*/

import { ref } from 'vue'
import HmModel from './components/hm-model.vue'
const num = ref(10)
</script>

<template>
  <div class="play-page">play</div>
  <hr />
  <!-- <HmModel :modelValue="num" @update:modelValue="num = $event"></HmModel> -->
  <HmModel v-model:modelValue="num"></HmModel>
  <HmModel v-model="num"></HmModel>
</template>

<style lang="scss" scoped></style>
